<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邻近节点</title>

</head>
<body>

<div id="container" >
    <div>
        <a>超链接</a>
        <span>
                <ul>
                    <li>糖炒栗子</li>
                    <li id="chestnut">栗子</li>
                </ul>
            </span>
        <span>
                <ul>
                    <li>抽烟</li>
                    <li>喝酒</li>
                    <li>烫头</li>
                </ul>
            </span>
    </div>
    <div>
        <span>小黑胖子</span>
    </div>
</div>

<script type="text/javascript">
    let chestnut = document.querySelector("#chestnut") ;

    // 栗子 他爹
    console.log( chestnut.parentElement ) ;
    console.log( chestnut.parentNode ) ;

    // 栗子 它 前一个 兄弟
    console.log( chestnut.previousSibling )  ; // 选择节点
    console.log( chestnut.previousElementSibling  ) ; // 选择元素
    console.log( chestnut.nextElementSibling ) ;//返回 element 之后的那个 兄弟 元素 (相邻节点)
    console.log( chestnut.nextSibling) ;//返回 element 之后的那个兄弟节点 (相邻，可能是文本)
    console.log( chestnut.childNodes) ; //获得 element 元素的 所有 子节点 ( 含 文本 和 注释 )
    console.log( chestnut.attributes ) ;//获得 element 元素的 所有属性
    console.log( chestnut.firstChild) ; //获得 element 元素的 第一个 子节点 ( 可能是 文本 )
    console.log( chestnut.firstElementChild ) ;//获得 element 元素的第一个 子元素
    console.log( chestnut.lastElementChild ) ;//获得 element 元素的最后一个 子元素
    console.log( chestnut.lastChild ) ;//获得 element 元素的 最后一个 子节点 ( 可能是 文本 )

</script>


</body>
</html>